<template>
  <view class="uni-px-5">
  	<uni-data-checkbox class="checked" mode="tag" v-model="radio" :localdata="timeData"></uni-data-checkbox>
	 <button class="reserve-btn" @click="resv">确认预约</button>
       
   </view>
   
</template>

<script>
  export default {
    data() {
      return {
		  
	   coachTime:1,
	   timeDataDel:[],
       radio:null,
		timeData:[
			//上午时间段
			{value:8.5,
			disable:false,
			text:"08:30"},
			
			{value:9,
			disable:false,
			text:"09:00"},
			
			{value:9.5,
			disable:false,
			text:"09:30"},
			
			{value:10,
			disable:false,
			text:"10:00"},
			
			{value:10.5,
			disable:false,
			text:"10:30"},
			
			{value:11,
			disable:false,
			text:"11:00"},
			
			{value:11.5,
			disable:false,
			text:"11:30"},
			
			
			
	
			
			//下午时间段
			{value:13,
			disable:false,
			text:"13:00"},
			
			{value:13.5,
			disable:false,
			text:"13:30"},
			
			{value:14,
			disable:false,
			text:"14:00"},
			
			{value:14.5,
			disable:false,
			text:"14:30"},
			
			{value:15,
			disable:false,
			text:"15:00"},
			
			{value:15.5,
			disable:false,
			text:"15:30"},
			
			{value:16,
			disable:false,
			text:"16:00"},
			
			{value:16.5,
			disable:false,
			text:"16:30"},
			
			{value:17,
			disable:false,
			text:"17:00"},
			
			{value:17.5,
			disable:false,
			text:"17:30"},
			
			{value:18,
			disable:false,
			text:"18:00"},
			
			{value:18.5,
			disable:false,
			text:"18:30"},
			
			{value:19,
			disable:false,
			text:"19:00"}
		]
        
      };
    },
    methods: {
	 //提交预约时间段	
      resv (){
		  //遍历预约时间段的时间对象
		  for(let i=0;i<this.timeData.length;i++){
			  //遍历的时间对象与用户所选的时间对象进行比对
			  if(this.radio==this.timeData[i].value){
				  
				  if(this.radio<=18){
					  //课程默认时间为 1小时
					  //如果用户是预约的18:00之前的 就将18:00点后的两个对象也设置为禁用状态
					  this.timeDataDel.push(this.radio)
					  this.timeDataDel.push(this.radio+this.coachTime)
					  alert("该课程的时间为"+this.coachTime+"小时")
					  alert( "已成功预约,课程时间为"+this.timeData[i].text+"~"+this.timeData[i+1].text				  )
				  }else if(this.radio==18.5){
					  this.timeDataDel.push(this.radio)
					  alert("已成功预约,课程时间为"+this.timeData[i].text+"~"+"19:00")
				  }else if(this.radio==19){
					  this.timeDataDel.push(this.radio);
					  alert("已成功预约,课程时间为"+this.timeData[i].text+"~"+"19:30")
				  }
			  }
		  }
		  this.resd()
	  },
	  //将已预约的时间段禁止
	  resd (){
		  
		  for(let i=0;i<this.timeData.length;i++){
			  for(let a=0;a<this.timeDataDel.length;a++){
			  		if(this.timeData[i].value==this.timeDataDel[a]){
						this.timeData[i].disable=true
					}
			  }
		  }
	  }
	  
    },
	mounted:function () {
		
		this.resd();
	}
  };
</script>

<style >

.uni-px-5 {
 	    padding-left: 10px;
 	    padding-right: 10px;
		
		
}
.uni-pb-5 {
 	    padding-bottom: 10px;
}

.reserve-btn {
  width: 95%;
  height: 8vh;
  background-color: #00CED1;
  color: white;
  padding: 3px;
  border: none;
  margin-top: 25px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  
}


</style>